import React, { useCallback, useState } from 'react'
import Child from './Child';
export const ParentCallback = () => {
    const [count, setCount] = useState(0);
    const [age, setAge] = useState(0);
    console.log('render Parent')

    /***
     * useCallback
     * Parent 组件每渲染一次。handleClick就会重新生成。
     * 对于child 组件来说 上一次的 handleClick函数和新生成的 handleClick
     * 并不相等。所以Child组件每次都会渲染。
     * 解决的方式就是把handleClick函数用 useCallback 包裹起来。
     * 如果 age的值不改变 那么 无论父组件渲染多少次，handleClick函数始终相同。
     * 再加上child 组件内部用了 React.memo 。就会减少 child 组件不必要的渲染
     * 
     * */ 
    const handleClick = React.useCallback(() => {
        setAge( age + 5)
    }, [age])

    // const handleClick = () => {
    //     setCount((c) => c + 5)
    // }
    return (
        <div>
            <div>count: {count}</div>
            <button onClick={() => setCount(c => c + 1)}>count加一</button>
            <br />
            <div>age：{age}</div>
            <Child handleClick={handleClick} />
        </div>
    )
}